
    function Loop(params) {
        this.obj = document.querySelector(params.selector);
        this.loop = this.obj.querySelector('.loop-area');
        this.points = this.obj.querySelector('.points');
        this.point = this.obj.querySelectorAll(' .points .point');
        this.obj.style.height = params.height + "px";
        this.obj.style.width = params.width + "px";
        this.items = this.obj.querySelectorAll('.loop-area .item');

        this.items[0].classList.add('active')
        this.len = this.items.length;
        this.index = 0;
        // this.createBtn();
        if (params.autoplay) {
            this.autoplay();
        }
        if (params.btnClick) {
            this.createBtn();
        }
        if (params.pointClick) {
            this.createPoints();
        }
        if (params.inOut) {
            this.inOut();
        }
    }
    var t1 = document.querySelectorAll('.text1 .t1');
    t1.move = function () {
        for (var i = 0; i < t1.length; i++) {
            t1[i].classList.remove('active')
        }
        t1[i].classList.add('active')
    }
    var lu = document.querySelector('.loop-bottom ul ')
    var t2 = document.querySelectorAll('.loop-bottom ul .t2 img');
    lu.onmouseenter = function (e) {
        //圆点点击事件委托给ul进行选择，点击哪个跳转哪个
        console.log(this.index)

        if (e.target.localName == 'li') {
            console.log('移入了')
            for (var i = 0; i < t1.length; i++) {
                t2[i].classList.remove('show-wrap')
                // console.log(t2)
                console.log(e)
            }
            t2[i].classList.add('show-wrap')
            this.move();
            //e就是函数形参，target翻译是目标，local Name是标签名，点击时li的时触发下边的代码
            // cont = e.target.dataset.i;
            //cont就选择到点击的li的target里边的dataset选项里的i
            //    console.log(e)
            // for (var i = 0; i < second_right.length; i++) {
            //     second_right[i].classList.remove('active');
            //     li1[i].classList.remove('active');
            // }
            // second_right[cont].classList.add('active');
            // li1[cont].classList.add('active');
        }
    }

    // t2[index].style.border="border:none;"
    console.log(t2)

    //添加移动添加active类名
    Loop.prototype.move = function () {
        // console.log(this.items[this.index])
        for (var i = 0; i < this.len; i++) {
            this.items[i].classList.remove('active')
            // t2[i].classList.remove('show-wrap')

            if (this.pointClick) {
                this.point[i].classList.remove('active')
            }
        }
        // t2.items[this.index].classList.add('show-wrap')

        this.items[this.index].classList.add('active')
        if (this.pointClick) {

            this.point[this.index].classList.add('active')
        }
    }
    //向上一张点击
    Loop.prototype.prev = function () {
        this.index--;
        if (this.index <= -1) {
            this.index = this.len - 1
        }
        this.move()
    }
    //乡下一张点击
    Loop.prototype.next = function () {
        this.index++;
        if (this.index >= this.len) {
            this.index = 0
        }
        this.move()
    }
    //autoplay是一个计时器
    Loop.prototype.autoplay = function () {
        var that = this;
        this.timer = setInterval(function () {
            that.next();
        }, 1500)
    }
    //左右点击的按钮创建以及封装
    // Loop.prototype.createBtn = function () {
    //     var that = this
    //     this.left = document.createElement('span')
    //     this.left.className = 'btn left';
    //     this.left.innerHTML = "&lt"
    //     this.right = document.createElement('span')
    //     this.right.className = 'btn right';
    //     this.right.innerHTML = '&gt'
    //     this.obj.append(this.left, this.right)
    //     this.left.onclick = function () {
    //         that.prev()
    //     }
    //     this.right.onclick = function () {
    //         that.next()
    //     }
    // }



    //圆点点击创建的按钮以及封装

    Loop.prototype.createPoints = function () {
        var that = this
        this.points = document.createElement('ul')
        this.points.className = 'points'

        //循环创建5个li自定义属性data-i
        for (var i = 0; i < this.len; i++) {
            var li = document.createElement('li');
            li.className = 'point'
            li.setAttribute('data-i', i)
            //setAttribute 方法设置指定标签属性的值设置属性
            //将创建好的liappend到ul里边
            this.points.append(li);
        }
        this.obj.append(this.points);
        this.point = this.obj.querySelectorAll('.point');
        this.point[0].classList.add('active')

        this.points.onclick = function (e) {
            that.pointClick(e);
        }
        //圆点点击的封装函数
        Loop.prototype.pointClick = function (e) {
            if (e.target.localName == 'li') {
                //判断点击的是不是li，利用添加的data-i和li做对比
                this.index = e.target.dataset.i;
                this.move();
            }
        }
        //鼠标移入移出事件。
        Loop.prototype.inOut = function () {
            var that = this
            this.obj.onmouseenter = function () {
                clearInterval(that.timer)
            }
            //
            this.obj.onmouseleave = function () {
                that.autoplay();
            }
        }
    }
    //loop1= newLoop里边全部都是方法，
    var loop1 = new Loop({
        //选择选择器为.loop1的内容
        selector: '.loop1',
        // width: 660,
        // height: 286,
        //如果需要轮播，添加auto play等于true，就回生成轮播
        autoplay: true,
        //如果需要点击左右按钮，就添加btnclick：true，就会生成左右点击
        // btnClick: true,
        //如果需要点击圆点进行翻页，就添加pointclick：true就会生成圆点点击
        pointClick: true,
        //如果需要生成鼠标移入移除事件，就添加inout:true,就会生成鼠标移入移出事件
        inOut: true
    })
